<template>
  <div class="page" v-loading="loading">
    <div style="margin-bottom: 15px;">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="学校名称:">
          <el-select v-model="schoolInfo" @change="changeSchool" placeholder="学校名称">
            <el-option v-for="item in schoolList" :label="item.schoolName" :key="item.schoolName" :value="item.id+''"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级名称:">
          <el-select v-model="searchInfo.className" placeholder="班级名称">
            <el-option v-for="item in classList" :key="item.className" :label="item.className" :value="item.className"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名:">
          <el-input v-model="searchInfo.userName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="学号:">
          <el-input v-model="searchInfo.jobId" placeholder="请输入学号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initPage"><i class="el-icon-search"></i> 查询</el-button>
          <el-button type="warning" @click="close"><i class="el-icon-delete"></i> 清除</el-button>
          <el-button type="primary" @click="flag=true"><i class="el-icon-download"></i> 导入</el-button>
          <el-button type="success" @click="excelDowload"><i class="el-icon-upload2"></i> 下载模板</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table @selection-change="selection" :data="userList" center border style="width: 100%;min-height: 60vh;margin-bottom: 15px;">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="姓名" prop="userName"></el-table-column>
      <el-table-column sortable label="学号" prop="jobId"></el-table-column>
      <el-table-column sortable label="出生日期" prop="birthday"></el-table-column>
      <el-table-column label="学校名称" prop="schoolName"></el-table-column>
      <el-table-column label="班级名称" prop="className"></el-table-column>
      <el-table-column label="电子邮箱" prop="email"></el-table-column>
      <el-table-column label="角色" width="80">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="scope.row.isAdmin" size="mini">管理员</el-tag>
            <el-tag v-else　type="danger" size="mini">普通用户</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          <div>
            <el-tag v-if="!scope.row.disabled" size="mini">启用</el-tag>
            <el-tag v-else　type="danger" size="mini">禁用</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click="openUpdate(scope.row)">修改</el-button>
            <el-button type="warning" size="mini" @click="disableUser(scope.row.id)" v-if="scope.row.disabled == 0">禁用</el-button>
            <el-button type="success" size="mini" @click="disableUser(scope.row.id)" v-else>启用</el-button>
            <el-button type="primary" size="mini" @click="restorePassword(scope.row.jobId)">重置密码</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: flex-end;align-items: center;">
      <el-pagination :total="total" :page-size="searchInfo.limit" @current-change="currentChange" @size-change="handleSizeChange"
        background layout="sizes,prev,pager,next,jumper"></el-pagination>
    </div>
    <el-dialog :visible.sync="flag" @close="importClose" center width="40%">
      <div slot="title">导入学生</div>
      <div style="padding: 10px 50px 0;">
        <el-form :model="importInfo" :rules="importRules" label-width="80px" ref="form">
          <el-form-item prop="school" label="所在学校">
            <el-select style="width: 20em;" v-model="importInfo.schoolId" @change="changeSchool" placeholder="请选择所在学校">
              <el-option v-for="item in schoolList" :label="item.schoolName" :key="item.id" :value="item.id+''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="classId" label="所在班级">
            <el-select style="width: 20em;" v-model="importInfo.classId" placeholder="请选择所在班级">
              <el-option v-for="item in classList" :key="item.className" :label="item.className" :value="item.classId + ''"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学生信息">
            <el-upload class="upload-demo" drag :data="importInfo" :action="$api + '/user/upload_file'" :auto-upload="false" ref="upload">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="importClose" style="background-color: rgb(240,240,240);width: 120px;">取 消</el-button>
        <el-button type="primary" @click="importSave" style="width: 120px;">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改用户信息" :visible.sync="updateFlag" width="30%" center>
      <el-form ref="form" :model="updateUserInfo" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="updateUserInfo.userName"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="updateUserInfo.jobId" disabled></el-input>
        </el-form-item>
        <el-form-item label="学校名称">
          <el-select v-model="updateUserInfo.schoolName" placeholder="请选择学校名称" style="width:100%;" disabled>
            <el-option :label="item.schoolName" :value="item.id" v-for="item in schoolList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在班级">
          <el-select v-model="updateUserInfo.className" placeholder="请选择班级" style="width:100%;" disabled>
            <el-option :label="item.className" :value="item.id" v-for="item in classList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="updateUserInfo.email" placeholder="请填写邮箱"></el-input>
        </el-form-item>
        <div style="text-align: center;">
          <el-button type="primary" @click="updateInfoSubmit()">提交</el-button>
          <el-button @click="updateUserInfo = {}; updateFlag = false;" type="info" plain>取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {
    download
  } from "@/utils/util"
  export default {
    name: "user-manage",
    data() {
      return {
        schoolInfo: '',
        searchInfo: {
          userName: "",
          jobId: '',
          className: '',
          schoolName: '',
          page: 1,
          limit: 10
        },
        userList: [],
        select:[],
        total: 0,
        loading: false,
        schoolList: [],
        classList: [],
        importClass:[],
        flag: false,
        importInfo: {
          schoolId:'',
          classId:''
        },
        importRules: {
          schoolId:[{required:true,message:'请选择所在学校',trigger:'blur'}],
          classId:[{required:true,message:'请选择所在班级',trigger:'blur'}]
        },
        updateFlag:false,
        updateUserInfo:{
          userName:'',
          jobId:'',
          email:'',
          schoolName:'',
          className:'',
          id:'',
        },
      }
    },
    methods: {
      initPage() { //获取用户列表
        this.loading = true
        this.$get('/user/list', this.searchInfo).then(res => {
          if (res.code == 200) {
            this.userList = res.data.data
            this.total = res.data.count
          }
          this.loading = false
        })
      },
      getSchool() {
        this.$get("/school_info/school_list").then(res => {
          if (res.code == 200) this.schoolList = res.data
        })
      },
      getClass(id,data) {
        this.$get("/school_info/class_list", {
          schoolId: id
        }).then(res => {
          if (res.code == 200) this.classList = res.data.data;
        })
      },
      handleSizeChange(limit) {
        this.searchInfo.limit = limit
        console.log(this.searchInfo)
      },
      currentChange(page) {
        this.searchInfo.page = page
        this.initPage()
      },
      selection(data){
        console.log(data)
      },
      changeSchool(data) {
        let temp = null;
        this.schoolList.map(item => {
          if (data == item.id) temp = item
        })
        this.searchInfo.schoolName = temp.schoolName
        this.getClass(data,this.classList)
      },
      excelDowload() {
        download('学生模板信息', "/static/res/用户导入模板.xls")
      },
      uploadExcel(file, fileList) {
        let data = new FormData();
        // data.append("file", file.file)
      },
      importSave() {
        if(this.importInfo.classId.length == 0 || this.importInfo.schoolId.length == 0){
          return this.$message.warning("请将学校和班级信息填写完整");
        }
        this.$confirm("上传成功后就不能撤销，是否继续上传？").then(abc => {
          this.$refs.upload.submit();
          this.flag = false;
          this.$message.success("上传成功，请等待结果");
          this.initPage();
        })
      },
      importClose() {
        this.$refs['upload'].clearFiles()
        this.flag = false
        this.importInfo = {
          schoolId:'',
          classId:''
        }
      },
      openUpdate(item){
        this.updateUserInfo.jobId = item.jobId; this.updateUserInfo.userName = item.userName, this.updateUserInfo.email = item.email;
        this.updateUserInfo.schoolName = item.schoolName, this.updateUserInfo.className = item.className;
        this.updateUserInfo.id = item.id; this.updateUserInfo.score = item.score; this.updateUserInfo.isAdmin = item.isAdmin;
        this.schoolList.forEach(schoolItem => {
          if(schoolItem.schoolName === item.schoolName) this.updateUserInfo.schoolId = schoolItem.id;
        })
        this.getClass(this.updateUserInfo.schoolId);
        setTimeout(() => {
          this.classList.forEach(classItem => {
            if(classItem.className === item.className) this.updateUserInfo.userClassId = classItem.classId;
          })
          console.log(this.updateUserInfo);
          this.updateFlag = true;
        }, 800);
      },
      close() {
        this.schoolInfo = ''
        this.classList = []
        this.searchInfo = {
          userName: "",
          jbId: '',
          className: '',
          schoolName: '',
          page: 1,
          limit: 10
        }
      },
      updateInfoSubmit(){
        this.updateUserInfo.username = this.updateUserInfo.userName;
        this.updateUserInfo.className = this.updateUserInfo.schoolName = null;
        this.$post('/user/update_userInfo', this.updateUserInfo).then(result => {
           if(result.code === 200){
             this.initPage();
             return this.$message.success("修改成功");
           }else
             this.$message.warning(result.data);
        })
        this.updateFlag = false;
      },
      disableUser(id){
        this.$del("/user/disable_user",{userIds:id}).then(result => {
           if(result.code == 200){
              this.$message.success(result.data);
           }else
             this.$message.warning(result.data);
           this.initPage();
        })
      },
      restorePassword(jobId){
        this.$confirm("是否将该用户的密码重置成为原始密码：123456？？").then(abc => {
            this.$post("/user/restore", {jobId: jobId}).then(result => {
               if(result.code == 200){
                  this.$message.success(result.data);
               }else
                 this.$message.warning(result.data);
            })
        })
      }

    },
    created() {
      this.initPage()
      this.getSchool()
    },
  }
</script>

<style lang="scss" scoped>
  .page {
    border-radius: 8px;
    background-color: #fff;
    min-height: calc(100vh - 105px);
    box-sizing: border-box;
    padding: 15px;
  }

  >>>.el-table__cell .cell,
  >>>.has-gutter tr .cell {
    text-align: center;
  }
</style>
